<template>
  <view class="stall">
    <view class="stall-item">
      <scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll()" scroll-left="120">
        <view id="demo1" v-for="item in stall" :key="item.id" class="scroll-view-item_H uni-bg-red" >
          <view>
            <view class="scroll-top">
              <view class="scroll-top-text"> {{ item.chepai }}</view>
              <view class="scroll-top-op">
                <view>{{ item.type }}</view>
              </view>
            </view>

            <view class="box">
              <view class="top"></view>
              <view class="left"></view>
              <view class="right"></view>
              <view class="bottom-left"></view>
              <view class="bottom-right"></view>
              <view class="font"> P </view>
              <!-- 车的icon -->
              <image src="../../static/image/小轿车.png" mode="scaleToFill" />
            </view>
            <!-- 车牌 -->
            <view class="pai">
              <view class="zi"> {{ item.chepai  }}</view>
            </view>
            <view>
              <Card title="车位信息" :isBorder="true">
                <template v-slot:fu-title>
                  <view class="btn" style="
                        background-color: rgb(247, 247, 247);
                        color: rgb(183, 183, 183);
                        padding: 10rpx;
                        border: 3rpx solid #e0e0e0;
                      ">解除绑定</view>
                </template>
                <template v-slot:main>
                  <view class="xinxi">
                    <view class="xinxi-item">
                      <view class="xinxi-item-title">车位楼层</view>
                      <view class="xinxi-item-text">{{ item.louceg   }}</view>
                    </view>
                    <view class="xinxi-item">
                      <view class="xinxi-item-title">车位位置</view>
                      <view class="xinxi-item-text">{{ item.weizhi }}</view>
                    </view>
                    <view class="xinxi-item">
                      <view class="xinxi-item-title">车位号</view>
                      <view class="xinxi-item-text">{{ item.carNumber }}</view>
                    </view>
                    <view class="xinxi-item">
                      <view class="xinxi-item-title">车位类型</view>
                      <view class="xinxi-item-text">{{ item.carType }}</view>
                    </view>
                    <view class="xinxi-item">
                      <view class="xinxi-item-title">车位尺寸</view>
                      <view class="xinxi-item-text"> {{ item.carChi }}</view>
                    </view>
                    <view class="xinxi-item">
                      <view class="xinxi-item-title">绑定车辆</view>
                      <view class="xinxi-item-text"> {{ item.chepai }}</view>
                    </view>
                  </view>
                </template>
              </Card>
            </view>

          </view>
        </view>
       
      </scroll-view>
    </view>
  </view>

</template>

<script setup>
import Card from "../../components/card-2.0.vue";
import { getMyStallList } from "../../api/stallApi.js"
import { ref, onMounted } from "vue";
let swiperChange = () => { };
let user = JSON.parse(localStorage.getItem("user"));
let stall = ref([])
onMounted(() => {
  getMyStallList().then(res => {
    if (res.status == 200) {
      res.data.forEach(item => {
        if (item.uid == user.id) {
          stall.value.push(item)
          console.log(stall.value);
        }
      });
    }
  })
})

function scroll() {
  console.log("执行了scroll事件");
}
</script>

<style lang="scss" scoped>  
.stall {
  height: calc(100vh - 91rpx);
  background-color: #f5f5f5;
  width: 100%;
}
.scroll-view-item_H:last-child{
  margin-right: 100rpx;
}
.stall-item {
  position: relative;
  left: 5%;
  top: 7%;
  height: 37.125rem;
}

.scroll-Y {
  height: 300rpx;
}

.scroll-view_H {
  white-space: nowrap;
  width: 100%;
  height: 100%;
}

.scroll-view-item {
  height: 300rpx;
  font-size: 36rpx;
}

.scroll-view-item_H {
  border-radius: 20rpx;
  display: inline-block;
  width: 86%;
  height: 100%;
  overflow: hidden;
  font-size: 36rpx;
  background-color: #fff;
  margin-left: 20rpx;
}

.scroll-top {
  // background-color: #1c93ea;
  // 背景渐变
  background: linear-gradient(to bottom, #2d9beb, #74bdf2);
  height: 100rpx;
  width: 100%;
  border-radius: 20rpx 20rpx 0 0;
  position: relative;
}

.scroll-top-text {
  text-align: center;
  line-height: 100rpx;
  color: #fff;
  font-size: 38rpx;
  font-weight: 600;
}

.scroll-top-op {
  position: absolute;
  top: -48rpx;
  right: 25rpx;
  font-size: 20rpx;

  transform: rotate(-45deg);
  width: 35rpx;
  height: 160rpx;
  background-color: #f59a23;
  text-align: center;

  view {
    transform: rotate(100deg);
    width: 100%;
    height: 100%;
    margin-left: -2px ;
    line-height: 150rpx;
    color: #fff;
  }
}



// 图标停车位的样式
.box {
  height: 300rpx;
  width: 280rpx;
  border-radius: 10rpx;
  margin: auto;
  margin-top: 80rpx;
  transform-style: preserve-3d;
  position: relative;
  //   padding: 20rpx;
  //   box-sizing: border-box;
  text-align: center;

  // 向后旋转30
  .top {
    background-color: #f59a23;
    height: 20rpx;
    border-radius: 20rpx;
    position: absolute;
    top: 0;
    width: 100%;
    // transform: translate(-20rpx);
  }

  .left {
    position: absolute;
    left: 0;
    top: 0;
    width: 20rpx;
    height: 100%;
    background-color: #f59a23;
    border-radius: 20rpx;
    transform: rotateZ(16deg) translate(-40rpx, 5rpx);
  }

  .right {
    position: absolute;
    right: 0;
    top: 0;
    width: 20rpx;
    background-color: #f59a23;
    border-radius: 20rpx;
    height: 100%;
    transform: rotateZ(-16deg) translate(40rpx, 5rpx);
  }

  .bottom-left {
    width: 42%;
    height: 20rpx;
    background-color: #f59a23;
    position: absolute;
    left: 0;
    bottom: 0;
    border-radius: 20rpx;
    transform: translate(-80rpx, -5rpx);
  }

  .bottom-right {
    width: 42%;
    height: 20rpx;
    background-color: #f59a23;
    position: absolute;
    right: 0;
    bottom: 0;
    border-radius: 20rpx;
    transform: translate(80rpx, -5rpx);
  }

  .font {
    font-size: 80rpx;
    color: #f5b056;
    text-align: start;
    padding-left: 20rpx;
  }

  image {
    height: 200rpx;
    width: 250rpx;
    margin-top: -30rpx;
    // background-color: #5a7486;
  }
}

.pai {
  // height: 60rpx;
  // width: 150rpx;
  // position: absolute;
  // bottom: -100rpx;
  border: rgb(18, 150, 219) 5rpx solid;
  border-radius: 10rpx;
  left: 50%;
  margin: auto;
  width: 28%;
  text-align: center;
  margin-top: 3rpx;

  // margin-bottom: -200rpx;
  // margin-left: -75rpx;
  .zi {
    background-color: rgb(18, 150, 219);
    border-radius: 15rpx;
    margin: 4rpx;
    line-height: 50rpx;
    color: #fff;
    padding: 3rpx;
  }
}

.xinxi {

  // padding: 30rpx;
  .xinxi-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10rpx 20rpx;

    // margin-bottom: 20rpx;
    .xinxi-item-title {
      color: #999;
      font-size: 30rpx;
    }

    .xinxi-item-text {
      color: #0b0b0b;
      font-size: 30rpx;
    }
  }
}

.add {
  height: 100rpx;
  width: 100rpx;
  border-radius: 50%;
  color: rgb(53, 164, 243);
  box-shadow: 0 0 2rpx 5rpx rgb(149, 209, 251);
  text-align: center;
  line-height: 100rpx;
  font-size: 60rpx;
  position: fixed;
  left: 50%;
  bottom: 50rpx;
  margin-left: -50rpx;
}
</style>
